<template>
    <ul :list="list" class="ant-list-items ant-list-bordered"  @drop="onDrop" @dragover="onDragOver">
        <li class="ant-list-item" v-for="(item, index) in list" :key="item.id" 
            draggable="true"
            @dragstart="onDragStart($event, item.id, index)"
            @dragenter="onDragEnter($event, index)"
            :data-index="index"
            :class="{active: item.id ===selectedId, ghost: dragData.currentDragging}"
            @click="handleClick(item.id)">
            <a-tooltip :title="item.isHidden ? '显示' : '隐藏'">
                <a-button shape="circle" @click="handleChange(item.id, 'isHidden', !item.isHidden)">
                    <template v-slot:icon v-if="item.isHidden">
                        <EyeOutlined />
                    </template>
                    <template v-slot:icon v-else>
                        <EyeInvisibleOutlined />
                    </template>
                </a-button>
            </a-tooltip>
            <a-tooltip :title="item.isLocked ? '解锁' : '锁定'">
                <a-button shape="circle" @click="handleChange(item.id, 'isLocked', !item.isLocked)">
                    <template v-slot:icon v-if="item.isLocked">
                        <UnlockOutlined />
                    </template>
                    <template v-slot:icon v-else>
                        <LockOutlined />
                    </template>
                </a-button>
            </a-tooltip>
            <inline-edit :value="item.layerName as string" @change="(value) => { handleChange(item.id, 'layerName', value) }">
                <span>{{ item.layerName }}</span>
            </inline-edit>
            <a-tooltip title="拖动排序">
                <a-button shape="circle" class="handle">
                    <template v-slot:icon>
                        <DragOutlined />
                    </template></a-button>
            </a-tooltip>
        </li>
    </ul>
</template>
<script setup lang="ts" name="LayerList">
import { type PropType, reactive } from 'vue'
import { EyeOutlined, EyeInvisibleOutlined, LockOutlined, UnlockOutlined, DragOutlined } from '@ant-design/icons-vue'
import { arrayMoveMutable } from 'array-move'
import InlineEdit from '@/components/InlineEdit.vue'
import {getParentElement} from '@/constant/helper'

// 定义父组件传过来的值
const props = defineProps({
    list: {
        type: Array as PropType<ComponentData[]>,
        required: true
    },
    selectedId: {
        type: String,
        required: true
    }
});

const dragData = reactive({
    currentDragging :'',
    currentIndex: -1
})
let start = -1;
let end = -1
const onDragStart =(e:DragEvent, id: string, index:number)=>{
    dragData.currentDragging = id;
    dragData.currentIndex = index
    start = index
}
const onDrop =(e:DragEvent)=>{
    emit('drop', {start, end})
    dragData.currentDragging = ''
}
const onDragEnter = (e: DragEvent, index: number)=> {
    if (index !== dragData.currentIndex) {
        arrayMoveMutable(props.list, dragData.currentIndex, index)//目前修改的还是props.list  可以优化一下 改成自上而下的数据流的修改,不使用props.list
        dragData.currentIndex = index
        end = index
    }
}
const onDragOver = (e:DragEvent)=>{
    e.preventDefault()
}


// 定义子组件向父组件传值/事件
const emit = defineEmits(['select', 'change', 'drop']);


const handleClick = (id?: string) => {
    emit('select', id)
}
const handleChange = (id: string, key: string, value: boolean) => {
    const data = {
        id,
        key,
        value
    }
    emit('change', data)
}

</script>
<style scoped>
.ant-list-item {
    padding: 10px 15px;
    transition: all 0.5s ease-out;
    cursor: pointer;
    justify-content: normal;
    border: 1px solid #fff;
    border-bottom-color: #f0f0f0;
}

.ant-list-item .handle {
    cursor: move;
    margin-left: auto;
}

.ant-list-item.active {
    border: 1px solid #1890ff;
}

.ant-list-item:hover {
    background: #e6f7ff;
}

.ant-list-item>* {
    margin-right: 10px;
}

.ant-list-item button {
    font-size: 12px;
}
</style>